<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>订单</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link rel="shortcut icon" href="favicon.ico"/>
    <link href="../css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet"/>

    <!-- jqgrid-->
    <link href="../css/jqgrid/ui.jqgrid.css?0820" rel="stylesheet" th:href="@{/css/jqgrid/ui.jqgrid.css?0820}"/>
    <link href="../css/layui.css" rel="stylesheet" th:href="@{/css/layui.css}"/>
    <link href="../css/animate.css" rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link href="../css/style.css" rel="stylesheet" th:href="@{/css/style.css?123213}"/>

</head>

<body class="full-body">
<div class="form-content ">
    <div class="panel-body">
        <form class="form-inline" th:action="@{/sys/payment/orderDataList}" id="selectForm">
            <div class="form-top ">
                <div class="form-group">
                    <input type="text" name="outTradeNo" placeholder="请输入订单" class="form-control"/>
                </div>

                <div class="form-group">
                    <input type="text" name="mchId" lay-verify="num" placeholder="请输入商户编号" class="form-control"
                           lay-verType="alert"/>
                </div>


                <div class="form-group">
                    <select name="payStatus" class="form-control">
                        <option value="">交易状态</option>
                        <option value="1">代付中</option>
                        <option value="2">失败</option>
                        <option value="3">代付成功</option>
                    </select>
                </div>
                <div class="form-group">
                    <select name="payType" class="form-control">
                        <option value="">代付类型</option>
                        <option value="1">垫资代付</option>
                        <option value="2">余额代付</option>
                    </select>
                </div>

                <div class="form-group">
                    <select name="service" class="form-control">
                        <option value="">交易类型</option>
                        <option th:each="list:${tradeList}" th:value="${list.tradeType}"
                                th:text="${list.tradeType}"></option>
                    </select>
                </div>

                <div class="form-group">
                    <div class="input-group">
                         <span class="input-group-addon ">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        <input type="text" name="createTimeString" id="startDate" readonly="readonly"
                               autocomplete="off"
                               class="form-date-select form-control" placeholder="交易开始时间"/>
                    </div>
                    -
                    <div class="input-group">
                        <input type="text" name="endTimeString" id="endDate" readonly="readonly" autocomplete="off"
                               class="form-date-select form-control" placeholder="交易结束时间"/>
                    </div>
                </div>


                <div class="form-group">
                    <button type="reset" class="layui-btn layui-btn-primary">
                        <i class="layui-icon">&#x1002;</i>重置
                    </button>
                    <button class="layui-btn submit-btn" id="orderBtn" type="button">
                        <i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>

                <div class="form-group">
                    <button type="button" class="layui-btn" id="export-btn">导出订单</button>
                </div>

            </div>
        </form>
    </div>
</div>
<div class="wrapper-content">
    <div class="ibox-content animated fadeInRight">
        <div class="jqGrid_wrapper">
            <table id="table_list"></table>
            <div id="pager_list"></div>
        </div>
    </div>
</div>

<!-- 全局js -->
<div th:include="common/common_js :: onloadjs"></div>
<!-- 自定义js -->


<script type="text/javascript">
    $(document).ready(function () {

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#startDate', //指定元素
                // value: new Date(),
                type: "datetime",
                trigger: 'click' //采用click弹出
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#endDate', //指定元素
                // value: new Date(),
                type: "datetime",
                trigger: 'click' //采用click弹出
            });
        });

        var dataGrid = new DataGrid({
            dataGrid: $('#table_list'),
            searchForm: $('#selectForm'),
            dataGridPage: $('#pager_list'),

            rownumbers: true,
            rownumWidth: 60,
            colModel: [{
                header: '商户号',
                name: 'mchId',

                index: 'mchId',
                editable: false,

                width: 45,
                // sorttype: "int",
                sortable: false,
                search: false
            },
                {
                    header: '商户流水号',
                    name: 'outTradeNo',
                    index: 'outTradeNo',
                    // editable: false,
                    width: 90,
                    sortable: false,

                },
                {
                    header: '类型',
                    name: 'service',
                    index: 'service',
                    sortable: false,
                    width: 45
                },
                {
                    header: '代付金额',
                    name: 'transmoney',
                    index: 'transmoney',
                    sortable: false, formatter: moneyFormat,
                    width: 50
                },
                {
                    header: '交易手续费',
                    name: 'free',
                    index: 'free',
                    sortable: false, formatter: moneyFormat,
                    width: 38
                },
                {
                    header: '姓名',
                    name: 'accountName',
                    index: 'accountName',
                    sortable: false,
                    width: 40
                },
                {
                    header: '卡号',
                    name: 'bankCard',
                    index: 'bankCard',
                    sortable: false,
                    width: 70
                },
                {
                    header: '交易状态',
                    name: 'payStatus',
                    index: 'payStatus',
                    editable: true,
                    width: 30,

                    // sorttype: "float",
                    sortable: false,
                    formatter: function (value) {
                        switch (value) {
                            case '1':
                                return '代付中';
                            case '2':
                                return '失败';
                            case '3':
                                return '代付成功';

                        }
                    }
                },
                {
                    header: '代付类型',
                    name: 'payType',
                    index: 'payType',
                    editable: true,
                    width: 30,

                    // sorttype: "float",
                    sortable: false,
                    formatter: function (value) {
                        switch (value) {
                            case '1':
                                return '垫资代付';
                            case '2':
                                return '余额代付';


                        }
                    }
                }, {
                    header: '上游返回信息',
                    name: 'srcReason',
                    index: 'srcReason',
                    editable: true,
                    width: 80,

                    // sorttype: "float",
                    sortable: false,
                },
                {
                    header: '创建时间',
                    name: 'createTime',
                    index: 'createTime',
                    editable: false,
                    sortable: false,
                    width: 60,
                    // formatter:'date', formatoptions:{srcformat: 'U', newformat: 'Y-m-d H:i:s'}

                }
            ],
            footerrow: true, //分页上添加一行，用于显示统计信息
            userDataOnFooter: true,
            altRows: true
        })


        $("#orderBtn").click(function () {
            $("#table_list").jqGrid('setGridParam', {
                datatype: 'json',
                // mtype : "POST",
                postData: {
                    outTradeNo: $('input[name=outTradeNo]').val(),
                    mchId: $('input[name=mchId]').val(),
                    payType: $('select[name=payType]').val(),
                    payStatus: $('select[name=payStatus]').val(),
                    service: $('select[name=service]').val(),
                    createTimeString: $('input[name=createTimeString]').val(),
                    endTimeString: $('input[name=endTimeString]').val()

                }, // 发送数据
                page: 1
            }).trigger("reloadGrid"); //重新载入
        });

        $("#export-btn").click(function () {


            DownLoadFile({

                url: 'exportExcle', //请求的url

                data: {
                    outTradeNo: $('input[name=outTradeNo]').val(),
                    mchId: $('input[name=mchId]').val(),
                    payType: $('select[name=payType]').val(),
                    payStatus: $('select[name=payStatus]').val(),
                    service: $('select[name=service]').val(),
                    createTimeString: $('input[name=createTimeString]').val(),
                    endTimeString: $('input[name=endTimeString]').val()

                }//要发送的数据

            });
        });


    })

    function moneyFormat(cellValue) {
        if (cellValue == null || cellValue == '') {
            cellValue = 0;
        }
        cellValue = parseFloat(cellValue);
        cellValue = cellValue.toFixed(2);
        var total_p = "￥" + cellValue;

        return total_p;
    };
</script>


</body>

</html>